<template>
  <el-card>
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0"
      @click="deletePanelItem"
    />
    <div class="echarts h-full">
      <ECharts v-if="option" :option="option" :id="`Pie` + props.id" />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { ECOption } from "@/components/ECharts/config";
import { useRoute } from "vue-router";
import { isDarkMode } from "@/utils/index";
const emit = defineEmits(["deletePanelItemEvent"]);
const routeName = useRoute().name;

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, url } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const pieData = ref([
  { value: 5000, name: "Gitee 访问量" },
  { value: 5000, name: "GitHub 访问量" },
]);
const option = ref<ECOption>();

onMounted(() => {
  option.value = {
    title: {
      text: "Gitee / GitHub",
      subtext: "访问占比",
      left: "center",
      top: "47%",
      textStyle: {
        fontSize: 16,
        color: isDarkMode(routeName) ? "rgba(255,255,255,.8)" : "#767676",
      },
      subtextStyle: {
        fontSize: 14,
        color: isDarkMode(routeName) ? "rgba(255,255,255,.8)" : "#a1a1a1",
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "4%",
      left: "2%",
      orient: "vertical",
      icon: "circle", //图例形状
      align: "left",
      itemGap: 10,
      textStyle: {
        fontSize: 12,
        color: isDarkMode(routeName) ? "rgba(255,255,255,.8)" : "#a1a1a1",
        fontWeight: 400,
        fontFamily: "DINAlt",
      },
      formatter: function (name: string) {
        let dataCopy = "";
        for (let i = 0; i < pieData.value.length; i++) {
          if (
            pieData.value[i].name == name &&
            pieData.value[i].value >= 10000
          ) {
            dataCopy = (pieData.value[i].value / 10000).toFixed(2);
            return name + "   " + dataCopy + "w";
          } else if (pieData.value[i].name == name) {
            dataCopy = pieData.value[i].value + "";
            return name + "   " + dataCopy;
          }
        }
        return "";
      },
    },
    series: [
      {
        type: "pie",
        radius: ["60%", "38%"],
        center: ["50%", "52%"],
        silent: true,
        clockwise: true,
        startAngle: 150,
        data: pieData.value,
        labelLine: {
          length: 80,
          length2: 30,
          lineStyle: {
            width: 1,
          },
        },
        label: {
          position: "outside",
          show: true,
          formatter: "{d}%",
          fontWeight: 700,
          fontSize: 14,
          fontFamily: "DINLight",
          color: isDarkMode(routeName) ? "rgba(255,255,255,.8)" : "#a1a1a1",
        },
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0.5,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#feb791", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#fe8b4c", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0.5,
            colorStops: [
              {
                offset: 0,
                color: "#b898fd", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#8347fd", // 100% 处的颜色
              },
            ],
          },
        ],
      },
    ],
  };
});
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
}
.el-card-title {
  font-weight: bold;
  font-size: 14px;
  color: lightslategrey;
}
:deep(.el-card__body) {
  height: 100% !important;
  padding: 0 !important;
}
:deep(.el-card__header) {
  padding: 10px;
}
</style>
